﻿<MHover>
    <MCard @attributes="context.Attrs" Class="mx-auto hover-misc-transition" Color="grey lighten-4" MaxWidth="600">
        <MImage Src="https://cdn.masastack.com/stack/images/website/masa-blazor/cards/kitchen.png" AspectRatio="@(16 / 9d)">
            <ExpandTransition>
                <IfTransitionElement Value="@context.Hover"
                                     Class="d-flex transition-fast-in-fast-out orange darken-2 m-card--reveal text-h2 white--text"
                                     Style="height: 100%">
                    $14.99
                </IfTransitionElement>
            </ExpandTransition>
        </MImage>
        <MCardText Class="pt-6" Style="position:relative;">
            <MButton Absolute Color="orange" Class="white--text" Fab Large Right Top>
                <MIcon>mdi-cart</MIcon>
            </MButton>
            <div class="font-weight-light grey--text text-h6 mb-2">
                For the perfect meal
            </div>
            <h3 class="text-h4 font-weight-light orange--text mb-2">
                QW cooking utensils
            </h3>
            <div class="font-weight-light text-h6 mb-2">
                Our Vintage kitchen utensils delight any chef.<br>
                Made of bamboo by hand
            </div>
        </MCardText>
    </MCard>
</MHover>

<style>

.hover-misc-transition .m-card--reveal {
    align-items: center;
    bottom: 0;
    justify-content: center;
    opacity: .9;
    position: absolute;
    width: 100%;
}
</style>
